<template>
    <div class="footer-wrapper">
      <van-tabbar v-model="active" class="van-hairline--top" @click="change" active-color="#0085ca">
        <van-tabbar-item to="/index">
          <span>首页</span>
          <img
              slot="icon"
              slot-scope="props"
              :src="active === 0 ? footerIcon1.active : footerIcon1.normal"
            >
        </van-tabbar-item>
        <van-tabbar-item to="/public-survey">
          <span>众测</span>
          <img
            slot="icon"
            slot-scope="props"
            :src="active === 1 ? footerIcon3.active : footerIcon3.normal"
          >
        </van-tabbar-item>
        <van-tabbar-item to="/user">
          <span>我</span>
          <img
              slot="icon"
              slot-scope="props"
              :src="active === 2 ? footerIcon2.active : footerIcon2.normal"
          >
        </van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vant'
  export default {
    name: 'footerNav',
    props: {
      oactive: Number
    },
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem
    },
    data () {
      return {
        active: this.oactive,
        footerIcon1: {
          normal: '/static/images/footer-nav-icon1.png',
          active: '/static/images/footer-nav-icon1-active.png'
        },
        footerIcon2: {
          normal: '/static/images/footer-nav-icon2.png',
          active: '/static/images/footer-nav-icon2-active.png'
        },
        footerIcon3: {
          normal: '/static/images/footer-nav-icon3.png',
          active: '/static/images/footer-nav-icon3-active.png'
        }
      }
    },
    methods: {
      change (active) {
        // console.log(active)
      }
    }
  }
</script>

<style>
.footer-wrapper .van-tabbar-item__icon{
  width:24px;
  height: 24px;
}
.footer-wrapper .van-tabbar-item__icon img{
  height: 100%!important;
}
.footer-wrapper .van-tabbar-item__text span{
  font-size: 10px;
}
</style>
